brand.magicblocks.ai · v1.0

One brand kit. Three ways in.

Design tokens, 134 React components, 241 icons, 836+ brand assets, voice guidance, and HTML templates — published as a website, an npm family, and a JSON API. Pick the path that matches what you're building.

16 Chapters
134 Components
241 Icons
836+ Brand assets
3 npm packages

For marketing

Pick an icon. Grab a tagline. Drop in a template.

The full library of brand assets, copy, voice notes, and HTML templates — searchable, click-to-copy, ready to drop into a deck, email, or post.

→
241 icons, 8 logo variants, customer wall/assets
→
Taglines, value props, CTAs, about copy/content
→
Voice & tone — banned words, examples/voice
→
9 HTML templates with slot placeholders/templates
→
23 narrative scenes — engine blocks, race timelines, journey maps/components/11-narrative-systems
→
One-click downloads (PNG, SVG, source)/downloads

For app builders

`npm install` and ship.

Three workspace packages on GitHub Packages. Vanilla CSS for any static site, React + Tailwind for modern apps, brand-data JSON for either.

→
134 typed React components, live demos/components
→
110+ CSS vars — colour, type, spacing, motion/tokens
→
Drop-in CSS for any HTML/Astro/Hugo project/css/v1/
→
Browse the full chapter library#chapters

npm install \
  @magicblocksai/ui \
  @magicblocksai/css \
  @magicblocksai/brand

For AI agents

Fetch the JSON. Read the markdown. Use the contract.

Every page mirrors a JSON endpoint at /api/; every chapter HTML serves as Markdown via Cloudflare's auto-transform (append .md). Single source, three surfaces.

→
Full design-token JSON/api/brand.json
→
Component catalogue + per-component specs/api/components.json
→
Brand assets, copy, voice, templates/api/{assets,content,voice,templates}.json
→
How to consume the kit (5 modes)/AI-AGENT-GUIDE.md

Browse the visual library

16 chapters · 180+ demos · three buckets — General (foundations, atoms, molecules), Website (marketing narrative — chapter 11 has 23 hero scenes / engine blocks / journey maps / ROI calcs), App (shell, pipeline, AI). Each chapter HTML is the canonical visual reference.

All chapters & sections →

How it stays in sync

Every component change updates four surfaces in the same commit so what marketing reads, what your app installs, and what an agent fetches always agree.

1 Chapter HTML demo Visual reference + the HTML/CSS snippets you can paste anywhere.
2 _shared.css → @magicblocksai/css Vanilla CSS classes, identical to what the chapter HTML uses.
3 TSX → @magicblocksai/ui Typed React components with the matching API surface.
4 React snippet tab on the chapter page Copy-pasteable TSX showing exactly how to use it.

A regression script (check-coverage.mjs) and a markup-equivalence test gate every PR — drift between the four surfaces fails the build.

Stable resource URLs